<template>
  <view class="page-container">
    <u-navbar back-icon-color="#5489bb" title="商务确认" title-color="#5489bb" :background="{
					background: '#FFF',
				}">
    </u-navbar>

    <view class="content">
      <view class="serach-view">
        <u-search shape="square"
                  v-model="query"
                  height="80"
                  @search="search"
                  input-align="center"
                  :show-action="false"
                  :placeholder='placehoder'></u-search>
      </view>

      <view class="scroll-box" v-if="boxList.length">
        <view class="all-confirm">
          <m-checkbox @input="allChecked">发车日期</m-checkbox>
        </view>
        <view class="box-list">
          <view class="box " v-for="(value) in group">
            <view class="box-num">{{ value.ch }}</view>
            <view class="horizontal-box" v-for="box in value.list">
              <text :class="{checked:box.checked}">{{ box.XH }} — {{ box.PBH }}</text>
              <m-checkbox :value="box.checked" @input="changeValue(box,$event)" checked-color="#000">
                <span class="date" v-if="box.checked">{{ box.FYRQ }}</span>
                <span class="date" v-else></span>
              </m-checkbox>
            </view>
          </view>
          <view class="safe-area-inset-bottom"></view>
        </view>
      </view>
    </view>

    <u-picker show-time-tag @confirm="dateConfirm"
              ref="datepicker"
              :params="{
                            year: true,
                            month: true,
                            day: true,
                            hour: false,
                            minute: false,
                            second: false,
                        }"></u-picker>
  </view>
</template>

<script>
import UNavbar from "../../uview-ui/components/u-navbar/u-navbar";
import USearch from "../../uview-ui/components/u-search/u-search";
import MCheckbox from "../../components/m-checkbox";
import { getBusinessList, updateFCStatus, updateReturnStatus } from "../../api/task";
import UButton from "../../uview-ui/components/u-button/u-button";
import UInput from "../../uview-ui/components/u-input/u-input";
import { formatDateStr } from "../../utils/util";

export default {
  components: {
    UInput,
    UButton,
    MCheckbox,
    USearch,
    UNavbar
  },
  data() {
    return {
      query: '',
      placehoder: '搜索标题',
      boxList: [],
      id: '',
      selectItem: '',
      isAll: false,
      xcrzh: ''
    }
  },
  methods: {
    allChecked() {
      this.isAll = true
      if (this.xcrzh === '') {
        uni.showToast({
          icon: 'none',
          title: '请先返回选择卸车人'
        })
        return
      }
      this.showDatePicker()
    },
    async dateConfirm(e) {
      uni.showLoading({
        title: "正在加载"
      })
      if (this.isAll) {
        await updateFCStatus({
          ID: this.boxList.filter((e) => !e.checked).map((item) => item.ID).join(';'),
          ZT: '是',
          fyrq: `${ e.year }-${ e.month }-${ e.day }`,
          instanceId: this.id,
          xcr: this.xcrzh
        })
      } else {
        let item = this.selectItem
        await updateFCStatus({
          ID: item.ID,
          ZT: !this.selectItem.checked ? '是' : '否',
          fyrq: e?`${ e.year }-${ e.month }-${ e.day }`:'',
          instanceId: this.id,
          xcr: this.xcrzh
        })
      }
      await this.fetchData()
      uni.hideLoading()
    },
    showDatePicker() {
      this.$refs.datepicker.open()
    },
    search() {
      this.fetchData()
    },
    async changeValue(item, e) {
      if (this.xcrzh === '') {
        uni.showToast({
          icon: 'none',
          title: '请先返回选择卸车人'
        })
        return
      }
      this.isAll = false
      this.selectItem = item
      if (!item.checked) {
        this.showDatePicker()
      } else {
        await this.dateConfirm()
      }
    },
    async fetchData() {
      uni.showLoading({
        title: "正在加载"
      })

      const { data } = await getBusinessList({
        INSTANCEID: this.id,
        QUERY: this.query
      })

      this.boxList = data.data.map(e => {
        e.FYRQ = formatDateStr(e.FYRQ, 'YYYY-mm-dd')
        e.checked = e.FCZT === '是'
        return e
      });
      uni.hideLoading()
    }
  },
  computed: {
    received() {
      return this.boxList.filter(e => e.checked).length
    },
    unReceived() {
      return this.boxList.filter(e => !e.checked).length
    },
    group() {
      const group = {}
      this.boxList.forEach(e => {
        if (group.hasOwnProperty(e.CH)) {
          group[e.CH].push(e)
        } else {
          group[e.CH] = [ e ]
        }
      })
      return Object.keys(group).map(key => {
        let checkCount = group[key].filter(e => e.checked).length
        return {
          ch: key,
          sort: checkCount === group[key].length ? 1 : 0,
          list: group[key]
        }
      }).sort((o1, o2) => o1.sort - o2.sort)
    },
  },
  async onLoad(options) {
    this.id = options.id
    this.xcrzh = options.xcrzh
    await this.fetchData()
  }
}
</script>

<style lang="less">
.page-container {
  display: flex;

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0;

    .box-count {
      text-align: center;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;

      span {
        flex: 1;

        &.unReceived {
          color: #a62b2b;
        }
      }
    }

    .serach-view {
      padding: 20rpx;
    }

    .scroll-box {
      overflow: auto;
      flex: 1;

      .box-list {
        /*height: 100%;*/

        .box {
          .checked {
            color: #000;
          }

          color: #a62b2b;
          margin: 0 20rpx 20rpx;
          background-color: rgb(242, 242, 242);
          padding: 20rpx 80rpx;
          border-radius: 10rpx;
          line-height: 1.8;

          .horizontal-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }

    .search-empty {
      text-align: center;
    }
  }

  .date {
    color: #000;
    display: block;
    width: 160rpx;
  }

  .all-confirm {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    padding: 0rpx 144rpx 20rpx;
  }
}
</style>
